<template>
	<view
		class="Distribution-Search"
		:style="{
			borderRadius: radius,
			backgroundColor: bgColor
		}"
		@click.stop.prevent="navigateTo()"
	>
		<image :src="searchIcon" />

		<view class="Distribution-Search-main">
			<swiper autoplay circular vertical :interval="3000" easing-function="linear" class="Distribution-Search-main-swiper">
				<swiper-item
					:key="index"
					v-for="(item, index) in swiperList"
					@click.stop.prevent="navigateTo(item)"
					class="Distribution-Search-main-swiper-item"
				>
					<view>{{ item }}</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
const searchIcon = Object.freeze(require('@/static/icon/icon_home_search.png'));

export default {
	name: 'Distribution-Search',

	props: {
		bgColor: {
			type: String,
			default: '#F6F6F6'
		},

		radius: {
			type: String,
			default: '20rpx'
		},

		swiperList: {
			type: Array,
			default: () => {
				return [];
			}
		},

		source: {
			type: String,
			default: 'home' // home 探店，material 素材圈
		}
	},

	data() {
		return {
			searchIcon
		};
	},

	methods: {
		navigateTo(params = '') {
			const { swiperList, source } = this;

			if (swiperList.length && !params) {
				return;
			}

			const target = params?.label || params;
			const url = `/otherPage/TabbarCommonSearch?target=${target}&type=${source}`;

			uni.navigateTo({
				url
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.Distribution-Search {
	width: 100%;
	height: 64rpx;
	position: relative;
	padding: 0 18rpx 0 64rpx;

	image {
		width: 36rpx;
		height: 36rpx;
		position: absolute;
		top: 14rpx;
		left: 18rpx;
	}

	&-main {
		width: 100%;
		height: 100%;
		overflow: hidden;

		color: #999;
		font-size: 24rpx;

		&-swiper {
			width: 100%;
			height: 100%;

			&-item {
				view {
					line-height: 64rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}
		}
	}
}
</style>
